iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
2

簡言

繼續用 Flex 來置中,由於 Flex 物件對空間解讀的特殊性,我們只要在父層物件設定 display: flex,接著在需要垂直置中的物件上設定 margin: auto 即可自動置中囉。

原理說明

這個技巧真的是超級方便又省事,之前提過 Flex 是用行的概念來看待整個空間,但是當子物件只有一行的時候,該子物件會把整個父層高度都當成一個行來看待,這樣我們就可以直接利用了,而特別的是雖然 Flex 是用「行」做為空間的概念,但不會有 inline 只是單行文字高度這樣的特性,於是我們就能利用 Margin:auto 來達成子物件的垂直置中效果了,說了那麼多,其實也不用懂太多,會用就好了啦XDDD
/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif

原始碼

HTML

<div class="box box9">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於CSS可樂 『CSS垂直置中技巧,我只會23個,你會幾個?
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Flex + :before + flex-grow 做垂直置中
下一篇
使用 Flex + align-self 做垂直置中
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言